<template>
    <div class="app-container">
        <UnitsFrom
            ref="unitsFormRef"
            @fromQuery="fromQuery"
            @reset="reFresh"
        ></UnitsFrom>

        <sysQueryutils
            @toolClick="toolClick"
            :btnList="btnList"
            @reFresh="reFresh"
            :loading="loading"
        ></sysQueryutils>

        <unitsTable
            v-model:loading="loading"
            :tableData="tableData"
            @reFresh="reFresh(false)"
            @handleUserOpenDialog="handleUserOpenDialog"
        ></unitsTable>

        <template v-if="pageInfo.total > 0">
            <div>
                <pagination
                    v-model:total="pageInfo.total"
                    v-model:page="pageInfo.page"
                    v-model:limit="pageInfo.limit"
                    @pagination="searchPagination"
                    class="pagination"
                />
            </div>
        </template>

        <viewUnitsDialog
            v-model="dialogViewUnitsVisible"
            :viewUnitsRes="viewUnitsRes"
        ></viewUnitsDialog>

        <!-- 编辑和添加是一个 -->
        <addUnitsDialog
            v-model="dialogUnitsUserVisible"
            :unitsDialogType="unitsDialogType"
            :unitsId="unitsId"
            @reFresh="reFresh(false)"
        ></addUnitsDialog>

        <!-- 查看人员 -->
        <viewUnitsUserDialog
            v-model="dialogViewUnitsUserVisible"
            :company_name="company_name"
            :viewUnitsUserRes="viewUnitsUserRes"
        >
        </viewUnitsUserDialog>

        <!-- 添加成员 -->
        <addUnitsUserDialog
            v-model="dialogEditUnitsUserVisible"
            :editUnitsUserRes="editUnitsUserRes"
            :editUnitsUserChoosed="editUnitsUserChoosed"
            :companyId="unitsId"
        >
        </addUnitsUserDialog>
    </div>
</template>

<script setup lang="ts">
import { btnList } from "@/views/system/unitsManager";
import UnitsAPI from "@/api/system/units";

const unitsFormRef = ref();
const loading = ref(false);

const unitsDialogType: any = ref("添加");
const unitsId: any = ref("");
const company_name: any = ref("");

/**
 *  添加 查看 编辑  弹窗   查看成员 新增成员
 */
const dialogUnitsUserVisible = ref(false);
const dialogViewUnitsVisible = ref(false);

/**
 * 查看成员 新增成员
 */
const dialogViewUnitsUserVisible = ref(false);
const dialogEditUnitsUserVisible = ref(false);

// 查询参数
let pageInfo = {
    page: 1,
    limit: 10,
    total: 0,
};

// 表格数据
let tableData = ref([] as any);

// 分页查询表单
async function searchPagination(value: any) {
    unitsFormRef.value.querTableList();
}

// reFresh
async function reFresh(isReFresh: boolean = true) {
    if (isReFresh) {
        pageInfo.page = 1;
        pageInfo.limit = 10;
    }
    unitsFormRef.value.querTableList();
}

// 查询表单
async function fromQuery(formObj: any) {
    let params = {
        ...formObj,
        page: pageInfo.page,
        limit: pageInfo.limit,
    };
    loading.value = true;
    await UnitsAPI.getList(params)
        .then((res: any) => {
            tableData.value = res.data;
            pageInfo.page = res.current_page;
            pageInfo.total = res.total;
            pageInfo.limit = res.per_page;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

// 工具列表点击
async function toolClick(item: any) {
    switch (item.name) {
        case "新增单位":
            unitsDialogType.value = "添加";
            dialogUnitsUserVisible.value = true;
            break;
        default:
            break;
    }
}

// table操作弹窗
function handleUserOpenDialog(rowInfo: any) {
    if (rowInfo.type === "查看") {
        viewUser(rowInfo.item.row.id);
    }

    console.log(rowInfo);
    if (rowInfo.type === "编辑") {
        unitsId.value = rowInfo.item.row.id;
        unitsDialogType.value = "编辑";
        dialogUnitsUserVisible.value = true;
    }
    if (rowInfo.type === "查看成员") {
        company_name.value = rowInfo.item.row.name;
        viewUserNumberNumber(rowInfo.item.row.id);
    }
    if (rowInfo.type === "添加成员") {
        unitsId.value = rowInfo.item.row.id;
        getEditUnitsUserRes(rowInfo.item.row.id);
    }
}

let viewUnitsRes = ref([] as any);

// 查看单位
async function viewUser(id: string) {
    loading.value = true;
    await UnitsAPI.viewUnitsInfo({ id })
        .then((res: any) => {
            viewUnitsRes.value = res;
            dialogViewUnitsVisible.value = true;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

let viewUnitsUserRes = ref([] as any);
// 查看单位成员
async function viewUserNumberNumber(id: string) {
    loading.value = true;
    await UnitsAPI.viewUnitsUserUser({ company_id: id })
        .then((res: any) => {
            viewUnitsUserRes.value = res.data;
            dialogViewUnitsUserVisible.value = true;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

const editUnitsUserRes: any = ref([]);
const editUnitsUserChoosed: any = ref([]);

// 编辑新增单位成员
async function getEditUnitsUserRes(id: string) {
    loading.value = true;
    let flag = true;
    await UnitsAPI.getUnitsUserList({ company_id: id })
        .then((res: any) => {
            editUnitsUserRes.value = res;
        })
        .catch((err: any) => {
            console.log(err);
            flag = false;
        });

    await UnitsAPI.editUnitsUserUser(id)
        .then((res: any) => {
            editUnitsUserChoosed.value = res;
        })
        .catch((err: any) => {
            flag = false;
        });

    loading.value = false;
    dialogEditUnitsUserVisible.value = flag;
}

// onBeforeMount(() => {
//     searcManagerList();
// });
onMounted(() => {});
</script>

<style lang="scss" scoped>
.common_sty {
    padding: 0px 33px 27px 33px;
    background: #ecf0fe;
}
.app-container {
    @extend .common_sty;
    /* 57px = navbar = 57px */
    height: calc(100vh - 57px);
    overflow-y: scroll;
}

/** 开启tag标签  */
.hasTagsView {
    .app-container {
        @extend .common_sty;
        /* 84px = navbar + tags-view = 83px + 73px */
        height: calc(100vh - 141px);
        overflow-y: scroll;
        padding: 0px 33px 23px 33px;
    }
}
</style>
